<template>
    <div class="my">
        <!-- 头部信息 -->
        <nav-bar>
            <div slot="left" @click="goback">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div slot="center">发表文章</div>
        </nav-bar>

        <div style="margin-top: 10px;">
            <van-form @submit="onSubmit">
                <van-uploader
                    v-model="fileList"
                    multiple
                    :before-read="beforeRead"
                    :after-read="afterRead"
                />

                <van-field
                    v-model="form.title"
                    placeholder="标题"
                    autosize
                    maxlength="100"
                />

                <van-field
                    v-model="form.content"
                    placeholder="请输入文章内容"
                    rows="10"
                    type="textarea"
                    autosize
                    maxlength="100"
                />

                <div style="margin: 16px">
                    <van-button round block type="info" native-type="submit"
                        >发表</van-button
                    >
                </div>
            </van-form>
        </div>
    </div>
</template>
  
  <script>
// import { Uploader } from 'vant';
import base from "../../api/base.js";
import NavBar from "../../components/common/navbar/NavBar.vue";

export default {
    components: {
        NavBar,
    },
    data() {
        return {
            fileList: [],
            form: {
                title: "",
                content: "",
                imgList: []
            },
        };
    },

    methods: {
        goback() {
            this.$router.go(-1)
        },
        onSubmit() {
            console.log(this.form);
            this.$api.grass.AddGrass(this.form).then(res=>{
                this.$message.success('发表文章成功');
                this.$router.go(-1)
            }).catch(err => {
                console.log(err)
            })
        },
        // 文件读取前触发
        beforeRead(e) {
            if (e.size > 10 * 1024 * 1024) {
                this.$toast.fail("文件大小不能超过10M");
                return false;
            }
            return true;
        },
        // 文件读取完成后触发
        afterRead(file) {
            console.log(file);
            var that = this;
            // 单个上传
            // file.status = "uploading";
            // file.message = "上传中...";
            let img = new Image(); //创建对象，这个img就是传给上面的compress
            img.src = file.content;
            // let reader = new FileReader()
            // reader.readAsDataURL(file.file)
            img.onload = function () {
                //回调
                //这下面写接口，这里传base64格式给后台
                const formData = new FormData();
                formData.append("file", file.file);
                // 转化成png格式
                that.$http(
                    {
                        url: `${base.sq2}/app/article/upload/img`,
                        method: "post",
                        // "Content-Type": "multipart/form-data",
                        data: formData,
                        headers: {
                            "Content-Type": "multipart/form-data",
                            token: window.sessionStorage.getItem("appToken"),
                        },
                    }).then(
                    (res) => {
                        if (res.data.code === 200) {
                            // 返回的图片路径存入imgList数组
                            that.form.imgList.push(res.data.data);
                            that.filePath = res.data.data;
                        } else {
                            console.log("其它状态码是错误提示");
                        }
                    })
                    //(error) => {}
                //);
            };
        },
    },
};
</script>

  <style>
.van-field__control {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.van-uploader__upload {
    /* background-color: #ff0000; */
    /* color: #ffffff; */
    border-radius: 5px;
    border: 1px solid gray;
    margin-left: 20px;
}
</style>
  
  